<template>
    <view class="flex flex-col text-[#fff] items-center justify-center w-[100%] h-[250rpx] card_bg">
        <text class="text-[28rpx]">支付金额</text>
        <text class="text-[36rpx] font-[700]">￥{{ totalAmount}}</text>
    </view>
    <view class="px-[30rpx] w-[100%]">
        <view class="w-[100%] rounded-[20rpx] p-[20rpx] bg-[#fff] mt-[-20rpx]">
            <!-- 微信支付信息展示 -->
            <view class="flex items-center py-[10rpx]">
                <up-icon name="/static/images/icon/weixin.png" size="40rpx"></up-icon>
                <view class="ml-[10rpx]">微信支付</view>
            </view>
        </view>
        
        <!-- 添加协议阅读选项 -->
        <view class="mt-[20rpx] flex items-center">
            <up-checkbox v-model="protocolChecked" :activeColor="themeColor" @change="handleProtocolChange"></up-checkbox>
            <text class="ml-[10rpx] text-[26rpx] text-[#666]">我已阅读并同意</text>
            <text class="text-[26rpx] text-[#3b6ffe]" @click="goToProtocol">《支付协议》</text>
        </view>
        
        <view class="mt-[50rpx]">
			<up-button
				@click="pay_submit"
				text="立即支付"
				:loading="lodingBtn"
				
                :customStyle="{
                        color:  '#FFEFB8',
                        padding: '12rpx 74rpx',
                        fontWeight: '500',
                        borderRadius: '16rpx',
                        fontSize: '28rpx',
                        lineHeight: '40rpx',
                        background: 'linear-gradient( 98deg, #454545 0%, #000000 100%)'
                    }"></up-button>
		</view>
    </view>
</template>
<script setup>
import { ref, reactive, nextTick } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { pay_balance, pay_type, pay_order_balance, cy_pay } from '@/api/pay.js';

const pay = async () => { };
const pay_list = ref([])
const pay_model = ref('1'); // 默认设置为微信支付1
const totalAmount = ref(0);
const outTradeNo = ref(null);
const pay_wx = ref(false);
const pay_ye = ref(false);
const is_wx = ref(null);
const lodingBtn = ref(false);
const protocolChecked = ref(false); // 协议是否已勾选

// 处理协议勾选状态变化
const handleProtocolChange = (value) => {
    console.log('协议勾选状态:', value);
    protocolChecked.value = value;
}

// 跳转到协议页面
const goToProtocol = () => {
    uni.navigateTo({
        url: `/pages_qc/agreement/agreement`
    });
}

// 支付
const pay_submit = async () => {
   
    
    // 确保获取最新的协议勾选状态
    await nextTick();
    console.log('提交时协议勾选状态:', protocolChecked.value);
    
    // 检查协议是否已勾选
    if(!protocolChecked.value) {
        return uni.$u.toast('请勾选同意支付协议');
    }
    
    lodingBtn.value = true;
    await cy_pay({
        outTradeNo: outTradeNo.value,
        payCode: pay_model.value
    }).then((res) => {
        console.log(res.data)
        if (res.code == 200) {
            wx.requestPayment({
                timeStamp: res.data.timeStamp,
                nonceStr: res.data.nonceStr,
                package: res.data.packageValue,
                signType: res.data.signType,
                paySign: res.data.paySign,
                async success(e) {
                    uni.$u.toast('支付成功');
                    console.log('支付成功>>>>>>>>', outTradeNo.value)
                    // 支付成功后跳转到支付结果页面
                    // uni.navigateTo({
                    //     url: `/pages_qc/paymentResults/paymentResults?orderNo=${outTradeNo.value}`
                    // });
                },
                fail(e) {
                    console.log('支付失败');
                }
            });
        } else {
            uni.$u.toast(res.msg);
        }
        setTimeout(() => {
            lodingBtn.value = false;
        }, 1000);
    }).catch((e) => {
        console.log(e)
        lodingBtn.value = false;
        uni.$u.toast('请求超时');
    })
}

onLoad(async (options) => {
    outTradeNo.value = options?.orderNo;
    totalAmount.value = Number(options?.amount).toFixed(2);
  
    // 不再需要获取支付类型列表
    // await pay_type({
    //     outTradeNo: options.orderNo
    // })
    //     .then((res) => {
    //         console.log(res.data)
    //         if (res.data) {
    //             pay_list.value = res.data
    //         }
    //     })
    //     .catch((e) => {
    //         console.log(e);
    //     });
});
</script>
<style lang="scss" scoped>
.card_bg {
    background: #EDD29D;
}
</style>
